<template>
	<view class="container">
    <view class="blance flexC">
      <view>
        <view class="tit">积分</view>
        <view class="price">8993</view>
      </view>
      <image class="bg" :src="require('./images/integral@2x.png')"></image>
    </view>
    <view class="h2">积分明细</view>
    <view class="item flexT" v-for="item in 10" :key="item">
      <view>
        <view class="tit">下单增积分</view>
        <view class="time">05-09 12:45</view>
      </view>
      <view class="price">+¥90.00</view>
    </view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
			}
		}
			
	}
</script>
<style scoped lang="scss">
.container{
  .item{
    border-radius: 16upx;
    background: #fff;
    margin: 12upx $page-row-spacing;
    padding: 0 24upx;
    height: 118upx;
    .tit{
      font-size: 28upx;
      font-weight: 400;
    }
    .time{
      color: #999;
      font-size: 22upx;
      margin-top: 6upx;
    }
    .price{
      font-size: 30upx;
      margin-left: auto;
      color: #4083F0;
      font-weight: 500;
    }
  }
  .blance{
    position: relative;
    width: 710upx;
    height: 218upx;
    margin: 20upx auto;
    padding: 0 32upx 0 48upx;
    text-align: center;
    .bg{
      position: absolute;
      top:0;
      left:0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .tit{
      font-size: 24upx;
      color: #fff;
    }
    .price{
      font-size: 50upx;
      font-weight: 500;
      margin-top: 20upx;
      color: #fff;
    }
  }
}
.h2{
  font-weight: 400;
  font-size: 26upx;
  padding: 6upx 20upx 8upx;
}

</style>
